<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记录详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar"></div>

    <!-- 导航栏 -->
    <div class="weapp-nav">
        <span>记录详情</span>
    </div>

    <!-- 主要内容区 -->
    <div class="weapp-container">
        <!-- 基本信息 -->
        <div class="weapp-card">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold">基本信息</h2>
                <button class="weapp-button">
                    <i class="fas fa-edit mr-2"></i>
                    编辑
                </button>
            </div>
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="text-gray-500">记录时间</div>
                    <div>2024年3月10日 10:30</div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="text-gray-500">便便类型</div>
                    <div class="flex items-center">
                        <i class="fas fa-poo text-yellow-500 mr-2"></i>
                        正常便便
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="text-gray-500">健康状态</div>
                    <div class="text-green-500">
                        <i class="fas fa-check-circle mr-1"></i>
                        状态良好
                    </div>
                </div>
            </div>
        </div>

        <!-- 详细参数 -->
        <div class="weapp-card">
            <h2 class="text-lg font-semibold mb-4">详细参数</h2>
            <div class="grid grid-cols-2 gap-4">
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="text-sm text-gray-500 mb-1">形状</div>
                    <div class="font-medium">香蕉型</div>
                </div>
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="text-sm text-gray-500 mb-1">颜色</div>
                    <div class="font-medium">棕色</div>
                </div>
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="text-sm text-gray-500 mb-1">质地</div>
                    <div class="font-medium">适中</div>
                </div>
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="text-sm text-gray-500 mb-1">气味</div>
                    <div class="font-medium">正常</div>
                </div>
            </div>
        </div>

        <!-- 相关数据 -->
        <div class="weapp-card">
            <h2 class="text-lg font-semibold mb-4">相关数据</h2>
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="fas fa-tint text-blue-500 mr-2"></i>
                        <span class="text-gray-500">饮水量</span>
                    </div>
                    <div>500ml</div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="fas fa-clock text-yellow-500 mr-2"></i>
                        <span class="text-gray-500">排便时长</span>
                    </div>
                    <div>5分钟</div>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="fas fa-utensils text-green-500 mr-2"></i>
                        <span class="text-gray-500">上次进食</span>
                    </div>
                    <div>2小时前</div>
                </div>
            </div>
        </div>

        <!-- 备注信息 -->
        <div class="weapp-card">
            <h2 class="text-lg font-semibold mb-4">备注信息</h2>
            <div class="bg-gray-50 p-4 rounded-lg">
                <p class="text-gray-600">今天感觉状态不错，排便通畅，没有不适感。继续保持良好的作息和饮食习惯。</p>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="grid grid-cols-2 gap-4 mt-6 mb-8">
            <button class="weapp-button bg-red-500">
                <i class="fas fa-trash-alt mr-2"></i>
                删除记录
            </button>
            <button class="weapp-button">
                <i class="fas fa-share-alt mr-2"></i>
                分享记录
            </button>
        </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="weapp-tabbar">
        <div class="weapp-tabbar-item">
            <i class="fas fa-home weapp-tabbar-icon"></i>
            <span>记录</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-calendar-alt weapp-tabbar-icon"></i>
            <span>历史</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-chart-bar weapp-tabbar-icon"></i>
            <span>统计</span>
        </div>
        <div class="weapp-tabbar-item">
            <i class="fas fa-user weapp-tabbar-icon"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 